<template>
  <view>
    <!-- 搜索栏 -->
     <my-search-bar></my-search-bar>
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular>
      <swiper-item v-for="item in swipers" :key="item.goods_id">
        <image :src="item.image_src" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 导航菜单 -->
    <view class="nav-list">
      <image
        v-for="item in catitems"
        :key="item.name"
        class="nav-img"
        :src="item.image_src"
        mode="scaleToFill"
        @click="goToCategory(item.name)"
      />
    </view>
  <!-- 楼层数据 -->
    <view v-for="item in floordata" :key="item.floor_title.name">
      <!-- 标题部分 -->
      <image
        class="floor-title"
        :src="item.floor_title.image_src"
        mode="scaleToFill"
      />
      <!-- 内容部分 -->
      <view class="floor-img-box">
        <!-- 左边的图片 -->

        <navigator :url="item.product_list[0].navigator_url">
          <image
            :style="{ width: item.product_list[0].image_width + 'rpx' }"
            :src="item.product_list[0].image_src"
            mode="widthFix"
          />
        </navigator>


        <!-- 右边的图片 -->
        <view class="right-img-box">
         <navigator
           :url="subitem.navigator_url"
           v-for="(subitem, index) in item.product_list"
             :key="subitem.name"
         >
            <image
            v-show="index > 0"
            :src="subitem.image_src"
            :style="{ width: subitem.image_width + 'rpx' }"
            mode="widthFix"
          />
         </navigator>
        </view>
      </view>
    </view>
   
  </view>
</template>

<script>
export default {
   data() {
     return {
       swipers:[], //轮播图数组
       catitems:[],//导航菜单
       floordata: [] //楼层数据
     }
   },
    // 生命钩子
   onLoad(){
     this.getswipersData()
     this.getcatitemsData()
     this.getfloordataData()
   },

 methods: {
  //  轮播图
  async getswipersData(){
         const res=await uni.$request({
           url:'home/swiperdata'
         })
        //  console.log(res);
        if(res.meta.status===200){
           this.swipers=res.message
        }
   },

  //  导航菜单
    async getcatitemsData(){
      const res =await uni.$request({
        url:'home/catitems'
      })
      // console.log(res);
      if(res.meta.status===200){
        this.catitems=res.message
      }
    },
    goToCategory(name){
      if(name==='分类'){
        uni.switchTab({ url: '/pages/category/index' })
      }
    },
    // 楼层数据
  async getfloordataData(){
       const res=await uni.$request({
         url:'home/floordata'
       })
        if(res.meta.status===200){
        res.message.forEach(item=>{
          item.product_list.forEach(subitem=>{
            subitem.navigator_url='/subpkg/goods-list/index?' + subitem.navigator_url.split('?')[1]
          })
        })

        this.floordata=res.message
      }
     }
   },
}
</script>

<style lang="scss" scoped>
        //  轮播图style
    swiper {
      height: 400rpx;

      .swiper-item,
      image {
        width: 100%;
        height: 100%;
      }
    }
         //  导航菜单style
     .nav-list {
      display: flex;
      justify-content: space-around;
      margin: 15px 0;

      .nav-img {
        width: 128rpx;
        height: 140rpx;
      }
    }
      //  楼层数据style
      .floor-title {
      height: 60rpx;
      width: 100%;
      display: flex;
    }

    .right-img-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .floor-img-box {
      display: flex;
      padding-left: 10rpx;
    }
</style>